<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >报表下载
        </el-button>
      </el-col>
    </el-row>
    <el-row class="chart">
      <el-col :span="8">
        <div ref="pieOne" style="width: 100%; height: 400px;"></div>
      </el-col>
      <el-col :span="8">
        <div ref="pieTwo" style="width: 100%; height: 400px;"></div>
      </el-col>
      <el-col :span="8">
        <div ref="pieThree" style="width: 100%; height: 400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="lineOne" style="width: 100%; height: 400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="lineTwo" style="width: 100%; height: 400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Chart',
  mounted() {
    this.initLineOne();
    this.initLineTwo();
    this.createPieOne();
    this.createPieTwo();
    this.createPieTHree();
  },
  methods: {
    createPieOne() {
      const pieOneDom = this.$refs.pieOne;
      const pieOne = echarts.init(pieOneDom);
      const option = {
        title: {
          text: '立案状态对比图'
        },
        series: [
          {
            type: 'pie',
            data: [
              { value: 125, name: '待审查' },
              { value: 88, name: '审查通过' },
              { value: 233, name: '审查不通过' },
              { value: 8, name: '待补正' },
              { value: 300, name: '已立案' }
            ]
          }
        ]
      };
      pieOne.setOption(option);
    },
    createPieTwo() {
      const pieTwoDom = this.$refs.pieTwo;
      const pieTwo = echarts.init(pieTwoDom);
      const option = {
        title: {
          text: '审理结案对比图',
          align: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              { value: 48, name: '审理', color:'#409eff' },
              { value: 735, name: '结案', color:'#84c01e'},
            ]
          }
        ]
      };
      pieTwo.setOption(option);
    },
    createPieTHree() {
      const pieThreeDom = this.$refs.pieThree;
      const pieThree = echarts.init(pieThreeDom);
      const option = {
        title: {
          text: '还款金额对比图(万元)'
        },
        series: [
          {
            type: 'pie',
            data: [
              { value: 488.88, name: '已还' },
              { value: 735, name: '待还' },
            ]
          }
        ]
      };
      pieThree.setOption(option);
    },
    initLineOne() {
      const myChart = echarts.init(this.$refs.lineOne);
      const option = {
        title: {
          text: '月度立案图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [20, 32, 9, 4, 12, 30, 20, 14, 5],
          type: 'line'
        }]
      };
      myChart.setOption(option);
    },
    initLineTwo() {
      const myChart = echarts.init(this.$refs.lineTwo);
      const option = {
        title: {
          text: '月度还款金额图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [270, 392, 988, 444, 128, 380, 520, 314, 95],
          type: 'line'
        }]
      };
      myChart.setOption(option);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('fs/case/download', {
      }, `总览.xlsx`)
    }
  }
};
</script>
<style>
.chart .el-col{
  padding: 20px;
}

</style>
